<script setup lang="ts">
    import { reqGetUserInfo, reqUpdateUser } from "@/api/user";
    import { ref } from "vue";
    import dayjs from "dayjs";
    import useStore from "@/store";
    import { Toast } from "vant";
    // 用户基本信息
    const userInfo = ref({
        birthday: "",
        gender: 0,
        id: "",
        mobile: "",
        photo: "",
        name: "",
        intro: "",
    });
    // 获得用户基本信息
    async function getUserInfo() {
        const res = await reqGetUserInfo();
        userInfo.value = res.data.data;
    }
    getUserInfo();
    // -----------------------------------------------------------
    // 弹出层数据处理
    const show = ref(false);
    const active = ref<0 | 1 | 2 | 3>(0);
    const name = ref("");
    const gender = ref(0);
    const intro = ref("");
    const birthday = ref<Date>();
    const showPopup = (num: 0 | 1 | 2 | 3) => {
        name.value = userInfo.value.name;
        gender.value = userInfo.value.gender;
        intro.value = userInfo.value.intro;
        birthday.value = dayjs(userInfo.value.birthday).toDate();
        show.value = true;
        active.value = num;
    };
    // 提交
    const submitUpdate = async () => {
        const { user } = useStore();
        if (active.value === 0) {
            if (name.value.trim() === "") return Toast.fail("姓名不能为空");
            await reqUpdateUser({ name: name.value });
            userInfo.value.name = name.value;
        } else if (active.value === 1) {
            await reqUpdateUser({ gender: gender.value });
            userInfo.value.gender = gender.value;
        } else if (active.value === 2) {
            await reqUpdateUser({ intro: intro.value });
            userInfo.value.intro = intro.value;
        }
        user.resetUserInfo();
        Toast.success("操作成功");
        show.value = false;
    };
    // 处理生日
    const minDate = new Date(1995, 1, 1);
    const maxDate = new Date();
    async function onConfirm(value: Date) {
        show.value = false;
        const birthday = dayjs(value).format("YYYY-MM-DD");
        await reqUpdateUser({ birthday });
        userInfo.value.birthday = birthday;
    }
</script>
<template>
    <!-- 导航栏 -->
    <van-nav-bar
        title="编辑资料"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
        style="background-color: #07c160" />
    <van-cell
        @click="showPopup(0)"
        title="姓名"
        is-link
        :value="userInfo.name" />
    <van-cell
        @click="showPopup(1)"
        title="性别"
        is-link
        :value="userInfo.gender === 0 ? '男' : '女'" />
    <van-cell
        @click="showPopup(2)"
        title="个性签名"
        is-link
        :value="userInfo.intro || '暂无签名'" />
    <van-cell
        @click="showPopup(3)"
        title="生日"
        is-link
        :value="userInfo.birthday" />
    <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
        <van-row
            v-if="active !== 3"
            justify="space-between"
            style="text-align: center"
            align="center">
            <van-col :span="4"
                ><van-button
                    @click="show = false"
                    style="border: none"
                    plain
                    type="success"
                    >取消</van-button
                ></van-col
            >
            <van-col :span="4"
                ><van-button
                    @click="submitUpdate"
                    style="border: none"
                    plain
                    type="success"
                    >确定</van-button
                ></van-col
            >
        </van-row>
        <van-row v-if="active === 0">
            <van-field
                v-model="name"
                error
                colon
                clearable
                required
                label="姓名"
                placeholder="请输入新用户名"
                input-align="right" />
        </van-row>
        <van-row v-if="active === 1">
            <van-radio-group style="width: 100%" v-model="gender">
                <van-cell-group inset>
                    <van-cell title="男" clickable @click="gender = 0">
                        <template #right-icon>
                            <van-radio :name="0" />
                        </template>
                    </van-cell>
                    <van-cell title="女" clickable @click="gender = 1">
                        <template #right-icon>
                            <van-radio :name="1" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
        </van-row>
        <van-row v-if="active === 2">
            <van-cell-group style="width: 100%" inset>
                <van-field
                    v-model="intro"
                    rows="2"
                    autosize
                    type="textarea"
                    maxlength="50"
                    placeholder="请输入签名"
                    show-word-limit />
            </van-cell-group>
        </van-row>
        <van-row v-if="active === 3">
            <van-calendar
                v-model:show="show"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConfirm"
                color="#07c160"
                :default-date="birthday" />
        </van-row>
    </van-popup>
</template>
